<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/browser.min.js"></script>
    <style>
        html {
            font-size: 62.5%;
        }

        body {
            font-size: 1.4rem;
        }

        .container-box {
            margin: 50px;
            overflow: hidden;
            color: #444444;
        }

        .container-box label {
            float: left;
            margin-right: 10px;
            padding: 5px;
            text-align: left;
            font-weight: bold;
        }

        .container-box ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container-box li {
            cursor: pointer;
            float: left;
            padding: 5px 15px;
            border: 1px solid #444444;
            margin: 0 10px;
            list-style: none;
        }

        .container-box li.selected {
            color: #ffffff;
        }

        .container-box li.red {
            border: 1px solid darkred;
            background-color: darkred;
        }

        .container-box li.green {
            border: 1px solid darkgreen;
            background-color: darkgreen;
        }

        .container-box li.yellow {
            border: 1px solid darkorange;
            background-color: darkorange;
        }

        .container-box li.blue {
            border: 1px solid darkblue;
            background-color: darkblue;
        }

        .container-box li.violet {
            border: 1px solid darkviolet;
            background-color: darkviolet;
        }

    </style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    var colors = ["red", "blue", "green", "yellow", "violet"];
    var data = [
        {"name": "homepage", "value": "1"},
        {"name": "product", "value": "2"},
        {"name": "news", "value": "3"},
        {"name": "contact", "value": "4"},
        {"name": "aboutMe", "value": "5"}];
    class TabSelect extends React.Component {
        constructor(props) {
            super(props);
            this.state = {selected: this.props.selected};
        }

        handClick(e) {
            this.setState({selected: e.target.getAttribute("data-value")});
        }

        render() {
            var tabs = this.props.data.map((item, id)=> {
                var selected = item.value == this.state.selected ? "selected " + this.props.colors[parseInt(item.value) - 1] : "";
                return <li key={id} className={selected} data-value={item.value}
                           onClick={(e)=>this.handClick(e)}>{item.name}</li>;
            });

            return (
                    <div className="container-box">
                        <label>{this.props.label}</label>
                        <ul>
                            {tabs}
                        </ul>
                    </div>
            );
        }
    }
    ReactDOM.render(
            <TabSelect label="Color" colors={colors} data={data} selected="1"/>,
            document.getElementById('container')
    );
</script>
</body>
</html>